<div
      cdkOverlayOrigin
      #origin="cdkOverlayOrigin"
      #trigger
    >
      <div *ngIf="hiShowInput">
        <input #input
               hi-input
               [attr.autoComplete]="'off'"
               [attr.placeholder]="showPlaceholder ? hiPlaceHolder : null"
               [attr.autofocus]="hiAutoFocus ? 'autofocus' : null"
               [readonly]="!hiShowSearch"
               [disabled]="hiDisabled"
               [hiSize]="hiSize"
               [ngClass]="inputCls"
               [(ngModel)]="inputValue"
               (blur)="handleInputBlur($event)"
               (focus)="handleInputFocus($event)"
               (change)="handlerInputChange($event)"
        >
        <i *ngIf="showClearIcon"
           [class]="'anticon anticon-cross-circle'"
           [ngClass]="clearCls"
           [attr.title]="hiClearText"
           (click)="clearSelection($event)"></i>
        <i *ngIf="hiShowArrow && !isLoading"
           class="anticon anticon-down"
           [ngClass]="arrowCls"></i>
        <i *ngIf="isLoading"
           class="anticon anticon-loading anticon-spin"
           [ngClass]="loadingCls"></i>
        <span [ngClass]="labelCls">
          <ng-container *ngIf="!isLabelRenderTemplate; else labelTemplate">{{ labelRenderText }}</ng-container>
          <ng-template #labelTemplate>
            <ng-template [ngTemplateOutlet]="hiLabelRender" [ngTemplateOutletContext]="labelRenderContext"></ng-template>
          </ng-template>
        </span>
      </div>
      <ng-content></ng-content>
    </div>
    <ng-template
      cdkConnectedOverlay
      cdkConnectedOverlayHasBackdrop
      [cdkConnectedOverlayOrigin]="origin"
      (backdropClick)="closeMenu()"
      (detach)="closeMenu()"
      (positionChange)="onPositionChange($event)"
      [cdkConnectedOverlayOpen]="menuVisible"
    >
      <div #menu
           [ngClass]="menuCls" [ngStyle]="hiMenuStyle"
           [@dropDownAnimation]="dropDownPosition"
           (mouseleave)="onTriggerMouseLeave($event)"
      >
        <ul *ngFor="let options of hiColumns; let i = index;" [ngClass]="menuColumnCls">
          <li *ngFor="let option of options"
              [attr.title]="option.title || getOptionLabel(option)"
              [ngClass]="getOptionCls(option, i)"
              (mouseenter)="onOptionMouseEnter(option, i, $event)"
              (mouseleave)="onOptionMouseLeave(option, i, $event)"
              (click)="onOptionClick(option, i, $event)"
          >
            {{ getOptionLabel(option) }}
          </li>
        </ul>
      </div>
    </ng-template>